<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>数组扁平化</title>
  </head>
  <body>
    <!-- 
    数组扁平化: 取出嵌套数组(多维)中的所有元素放到一个新数组(一维)中
            如: [1, [3, [2, 4]]]  ==>  [1, 3, 2, 4]
  -->
    <!-- <script src="./node_modules/atguigu-utils/dist/atguigu-utils.js"></script> -->
    <script type="text/javascript">
      const aUtils = {
        // ---------------------------------方法一：reduce + concat + some + 递归调用
        // reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
        // some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
        // concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
        flatten1(array) {
          return array.reduce((pre, item) => {
            // 如果item是一个包含数组元素的数组, 进一步进行处理(递归调用)
            // 判断item是否是数组和item中是否有数组元素
            if (Array.isArray(item) && item.some((cItem) => Array.isArray(cItem))) {
              // 数组和包含数组元素的递归处理
              pre = pre.concat(aUtils.flatten1(item));
            } else {
              // 不是数组和没有数组的元素合并成新数组
              pre = pre.concat(item);
            }
            return pre;
          }, []);
        },
        // ---------------------------------方法二：concat + ... + some
        flatten2(array) {
          array = [].concat(...array);
          // 判断item是否是数组和item中是否有数组元素,有则一直在while循环中，直到出循环
          while (array.some((item) => Array.isArray(item))) {
            array = [].concat(...array);
          }
          return array;
        },
      };
    </script>
    <script>
      console.log(aUtils.flatten1([1, [3, [2, 4]]])); //[1, 3, 2, 4]
      console.log(aUtils.flatten2([1, [3, [2, 4]]])); //[1, 3, 2, 4]
    </script>
  </body>
</html>
